
/* ## Basic-XHTML-Elements ################################ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, helvetica, sans-serif;
  font-size: 13px;
}

body {
  color:#082343;
  background:#28648b;
  background-attachment: fixed;
}

body a, body a:visited {
  text-decoration:none;
  outline: none;
}

body a:hover {
  text-decoration: none;
}

::selection {
  background: $colorMain;
  color: #fff;
}

::-moz-selection {
  background: $colorMain;
  color: #fff;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

td.message ul {
  padding: 0 0 0 5px;
  margin: 0 0 0 10px;
  list-style-type: disc;
}

/* ## Basic-XHTML-Elements ############### END ############## */


/* ## LOGIN-Elements ################################ */

.login {
  width: 460px;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -230px;
}

.login-in, .login-alert {
  width: 100%;
  background: url($backgroundColorA) repeat 0 0;
  text-align: center;
  padding: 20px 0 20px 0;
}

.login-alert {
  margin: 3px 0 0 0;
  padding: 5px 0 5px 0;
  background-image: url(../images/login-alert.png);
  font-weight: bold;
  color: $loginAlert;
}

.login .logo-name {
  width:100%;
  text-align: center;
}

.logo-name h1 {
  color: $logoName;
  margin: 0;
  height: auto;
  line-height: normal;
}

.logo-name h2 {
  font-size: 15px;
  color: $logoSubname;
  margin: 8px 0 18px 0;
}

/* ## LOGIN-Elements ############## END ############# */


#sitebody {
  display: block;
  min-width: 980px;
  min-height: 100%;
  margin: 0 auto;
}

#header-wrapper {
  width:100%;
  height: 70px;
  background: url($backgroundColorA) repeat 0 0;
}

#header {
  width: 980px;
  margin: 0 auto 0 auto;
}

.header-in {
  padding: 11px 0 0 0;
  height: 70px;
}

#header .left {
  float: left;
  width: 742px;
  height: 70px;
  margin-right: 18px;
  overflow: hidden;
}

#header .right {
  float: left;
  width: 202px;
  padding-left: 18px;
}

#header .logo {
  float: left;
}

#header .logo img {
  float: left;
}

#header .logo h1 span.title {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  position: relative;
  top: 20px;
  left: -5px;
  display:block;
  float:left;
}

#header .logo h1 span.subtitle {
  color: $logoSubname;

}

/* ## MAIN-MENUE ######################################## */

#mainmenue {
  padding: 8px 0 0 0;
  position: relative;
}

#mainmenue li {
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 6px;
}

#mainmenue li a {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
}

#mainmenue li.desktop a {
  background: $menuTabDesktop;
}

#mainmenue li.profil-male a {
  background: $menuTabProfileMale;
}

#mainmenue li.profil-female a {
  background: $menuTabProfileFemale;
}

#mainmenue li.admin a {
  background: $menuTabAdmin;
}

#mainmenue li.logout a {
  background: $menuTabLogout;
}

#mainmenue li a span {
  display: none;
}

#mainmenue .submen {
  position: absolute;
  top: 34px;
  left: -6px;
  padding: 25px 0 0 0;
  float:left;
  z-index: 6;
  display: none;
}

#mainmenue .submen ul {
  width: auto;
  background: url($backgroundColorA) repeat 0 0;
  padding: 0 0 6px 6px;
  float: left;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#mainmenue .submen li {
  margin: -6px 6px 0 0;
}

#mainmenue li:hover .submen {
  display: block;
}

#mainmenue .submen li.project-settings a {
  background: $submenuProjectSettings;
}

#mainmenue .submen li.user-settings a {
  background: $submenuUserSettings;
}

#mainmenue .submen li.system-settings a {
  background: $submenuSystemSettings;
}

#mainmenue .submen li.customer-settings a {
  background: $submenuCustomerSettings;
}

#mainmenue li:hover a, #mainmenue li a.active, #mainmenue .submen li:hover a, #mainmenue .submen li a.active {
  background-position: 0 -32px;
}

#mainmenue li a:hover span {
  display: block;
  width: 200px;
  position: absolute;
  top: 18px;
  left: -222px;
  color: $mainMenueInfo;
  font-size: 12px;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
}

#mainmenue li .submen a:hover span {
  top: -16px;
  left: -216px;
}

#mainmenue li:hover a .submenarrow {
  display: block;
  position: relative;
  top: 32px;
  left: 0;
  width: 32px;
  height: 7px;
  padding: 0;
  background: url(../images/main-submen.png) no-repeat center 0;
}

/* ## CONTENT ######################################## */

#contentwrapper {
  width: 980px;
  margin: 0 auto -26px auto; /* same as footer-height (for IE 7) */
}

#content-left {
  width: 882px;
  min-height: 100px;
  background: $leftBlockBg;
  margin: 0 18px 10px 0;
  float: left;
}

#content-left-in {
  margin: 18px 18px 0 18px;
}

#content-left h1 {
  padding: 0 0 15px 2px;
  width: 100%;
  overflow: hidden;
}

#content-left h1 span {
  font-size: 15px;
}

#content-left h1.second {
  line-height: 34px;
  margin: -5px 0 10px 0;
  position: relative;
  left: -8px;
}

#content-left h1 img {
  float: left;
}

.content-spacer {
  clear: both;
  width: 100%;
  height: 27px;
}

.content-spacer-b {
  clear: both;
  width: 100%;
  height: 13px;
  margin: 13px 0 0 0;
  border-top: 1px dotted #000;
}

#content-right {
  width: 80px;
  min-height: 20px;
  background: url($backgroundColorA) repeat 0 0;
  margin: 0 0 0 0;
  padding: 5px 0 5px 0;
  float: left;
  color: $baseTextColor;
}

.content-right-in {
  width: 60px;
  margin: 23px 0 0 18px;
}

.content-right-in a {
  color: $baseTextColor;
}

.content-right-in a:hover {
  color: #9daab7;
}

#content-right h2 {
  font-size: 14px;
  margin: 0;
  line-height: 12px;
}

#content-right h2 a.win-up, #content-right h2 a.win-down {
  display: block;
  width: 100%;
  height: 16px;
  background: url(../images/win-up-side.png) no-repeat right 1px;
  margin: 0 0 5px 0;
}

#content-right h2 a.win-down {
  background: url(../images/win-down-side.png) no-repeat right 1px;
}

#content-right h2 a.win-up:hover, #content-right h2 a.win-down:hover {
  background-position: right -15px;
}

/* ## CHAT ############################################# */

.chat {
  background: url($backgroundColorA) repeat 0 0;
  padding: 11px;
  color: $baseTextColor;
  float: left;
  height: 100%;
}

.chat .row .text {
  float: left;
  width: 217px;
  height: 19px;
  padding: 4px 6px 0 6px;
  border:none;
  font-size: 12px;
  background: url(../images/input-bg-a.png) repeat-x 0 0;
  color: #0a182f;
  font-weight: bold;
  margin-right: 3px;
}

.chat .chattext {
  height: 200px;
  width: 300px;
  padding: 5px;
  overflow: auto;
  margin: 0 0 10px 0;
  float: left;
  background: #fff;
  color: #0a182f;
}

.chat button:hover {
  background: $baseTextColor;
  color: #0a182f;
}

.chat button[disabled]:hover {
  background: #384e67;
  color: #fff;
}

/* ## SEARCH MODAL ################################### */

.search-modal {
  width: 202px;
  min-height: 20px;
  background: url($backgroundColorA) repeat 0 0;
  margin: 0 0 0 0;
  padding: 12px 0px 23px 18px;
  float: left;
  color: $baseTextColor;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

/* ## WINTOOLS ######################################## */

.wintools {
  float: right;
  height: 26px;
  position: relative;
  top: -28px;
  margin: 0 37px -30px 0;
  z-index: 9;
}

.wintools a {
  background: url(../images/win-tools.png) 0 0;
}

.wintools a.close {
  background-position: 0 0;
}

.wintools a.close:hover {
  background-position: 0 -31px;
}

.wintools a.edit {
  background-position: -23px 0;
}

.wintools a.edit:hover {
  background-position: -23px -31px;
}

.wintools a.del {
  background-position: -46px 0;
}

.wintools a.del:hover {
  background-position: -46px -31px;
}

.wintools a.filter {
  background-position: -69px 0;
}

.wintools a.filter:hover, .wintools a.filter-active {
  background-position: -69px -31px;
}

.wintools a.add, .wintools a.add-active {
  background-position: right 0;
  margin-left: 9px;
}

.wintools a.add:hover, .wintools a.add-active {
  background-position: right -31px;
}

/* ## EXPORT-MAIN ##################################### */

.export-main, .add-main {
  float: right;
  width: 30px;
  height: 26px;
  position: relative;
  left: 0;
  top: -41px;
  margin: 0 9px -26px 0;
  background-repeat: no-repeat;
  background-position: right 0;
  z-index: 9;
}

.add-main {
  width: 19px;
}

.wintools .export-main {
  position: relative;
  top: 0;
  z-index: 1;
  margin: 0;
  float: left;
}

.export-main a span, .wintools a span, .add-main a span {
  display: none;
  white-space: nowrap;
}

.export-main a:hover span, .export-main .export-in a:hover span, .wintools a:hover span, .add-main a:hover span {
  display: block;
  height: 21px;
  line-height: 21px;
  position: absolute;
  top: -34px;
  right: 0;
  z-index: 9;
  color: $colorMain;
  font-size: 12px;
  background: $leftBlockBg;
  padding: 0 7px 0 7px;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  border-radius-top-left: 2px;
  border-radius-top-right: 2px;
}

.wintools .export-main a:hover span, .wintools .export-main .export-in a:hover span, .wintools a:hover span {
  top: -28px;
  color: $leftBlockBg;
  font-weight: bold;
}

.export-main .export-in a:hover span {
  right: -30px;
}

.export-main:hover, .add-main:hover {
  cursor: pointer;
  background-position: right -31px;
}

.export-in {
  display: none;
  position: absolute;
  top: 0;
  z-index: 8;
  right: 30px;
  height: 100%;
  float: left;
}

.export-main:hover .export-in {
  display: block;
}

.export-main a, .wintools a, .add-main a {
  float: left;
  display: block;
  width: 19px;
  height: 100%;
  margin-left: 4px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.toolwrapper {
  float: left;
  height: 100%;
  margin-left: 5px;
}

.projects .export-main, .projects .export-main a {
  background-image: url(../images/export-tasks.png);
}

.projects .wintools .export-main, .projects .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.projects .wintools .export-main a:hover span, .projects .wintools a:hover span {
  background: $projectsMain;
}

.tasks .export-main, .tasks .export-main a {
  background-image: url(../images/export-tasks.png);
}

.tasks .wintools .export-main, .tasks .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.tasks .wintools .export-main a:hover span, .tasks .wintools a:hover span, .wintools a:hover span {
  background: $tasksMain;
}

.msgs .export-main, .msgs .export-main a {
  background-image: url(../images/export-msgs.png);
}

.msgs .wintools .export-main, .msgs .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.msgs .wintools .export-main a:hover span, .msgs .wintools a:hover span {
  background: $msgsMain;
}

.user .export-main, .user .export-main a {
  background-image: url(../images/export-vcard.png);
}

.user .wintools .export-main, .user .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.user .wintools .export-main a:hover span, .user .wintools a:hover span {
  background: $userMain;
}

.timetrack .wintools .export-main, .timetrack .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.timetrack .wintools .export-main a:hover span, .timetrack .wintools a:hover span {
  background: $timetrackMain;
}

.miles .wintools .export-main, .miles .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.miles .wintools .export-main a:hover span, .miles .wintools a:hover span {
  background: $milesMain;
}

.neutral .wintools .export-main, .neutral .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.neutral .wintools .export-main a:hover span, .neutral .wintools a:hover span {
  background: $neutralMain;
}

.files .wintools .addmen .export-main, .files .wintools .addmen .export-main a {
  background-image: url(../images/add-files.png);
}

.files .wintools .export-main, .files .wintools .export-main a {
  background-image: url(../images/export-headline.png);
}

.files .wintools .export-main a:hover span, .files .wintools a:hover span {
  background: $filesMain;
}

.export-main a.export, .wintools .export-main a.export, .files .wintools .addmen .export-main a.export {
  background: none;
  width: 30px;
  margin: 0;
}

.add-main a.add, .add-main a.add-active {
  background-image: url(../images/adds.png);
  margin: 0;
}

.add-main a.add:hover, .add-main a.add-active {
  background-position: 0 -31px;
}

.export-main a.ical {
  background-position: 0 0;
}

.export-main a.ical:hover {
  background-position: 0 -31px;
}

.export-main a.pdf {
  background-position: -23px 0;
}

.export-main a.pdf:hover {
  background-position: -23px -31px;
}

.export-main a.rss {
  background-position: -46px 0;
}

.export-main a.rss:hover {
  background-position: -46px -31px;
}

.export-main a.excel {
  background-position: -69px 0;
}

.export-main a.excel:hover {
  background-position: -69px -31px;
}

.export-main a.vcardmale {
  width: 28px;
  background-position: -32px 0;
}

.export-main a.vcardmale:hover {
  background-position: -32px -31px;
}

.export-main a.vcardfemale {
  width: 28px;
  background-position: 0 0;
}

.export-main a.vcardfemale:hover {
  background-position: 0 -31px;
}

.export-main a.addfile {
  background-position: -31px 0;
}

.export-main a.addfile:hover, .export-main a.addfile-active {
  background-position: -31px -31px;
}

.export-main a.addfolder {
  width: 27px;
  background-position: 0 0;
}

.export-main a.addfolder:hover, .export-main a.addfolder-active {
  width: 27px;
  background-position: 0 -31px;
}

/* ## IN-MENUES ######################################## */

.inwrapper {
  float: left;
  width: 100%;
  margin: 6px 0 6px 0;
  font-size: 12px;
}

.inwrapper li {
  float: left;
  width: 92px;
  margin: 0 1px 6px 0;
  padding: 4px 0 0 0;
  text-align: center;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.inwrapper img {
  float: left;
}

.inwrapper .fileicon{
  max-height: 32px;
}

.itemwrapper {
  /* in this are all the li */
}

.itemwrapper table {
  width: 100%;
}

.inwrapper span.name a:hover {
  text-decoration: underline;
}

.inwrapper li td.thumb a {
  display: block;
  width: 32px;
  max-height: 32px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
}

.inwrapper li td.thumb {
  width: 32px;
  height: 32px;
}

.inwrapper li td.thumb a img {
  float: none;
  margin: 0;
}

.inwrapper span.name {
  display: block;
  clear: both;
  width: 100%;
  margin: 5px 0 0 0;
  height: 18px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
}

.inwrapper li .rightmen, .inwrapper li  .leftmen {
  width: 30px;
}

.inmenue {
  height: 32px;
}

.inmenue a {
  display: none;
  width: 14px;
  height: 14px;
  background: url(../images/inmenue-tools.png) no-repeat;
  margin: 0 0 3px 8px;
}

.itemwrapper:hover .inmenue a {
  display: block;
}

.inmenue a.more {
  background-position: 1px 1px;
}

.inmenue a.more:hover {
  background-position: 1px -13px;
}

.inmenue a.export {
  background-position: -13px 1px;
}

.inmenue a.export:hover {
  background-position: -13px -13px;
}

.inmenue a.edit {
  background-position: -27px 1px;
}

.inmenue a.edit:hover {
  background-position: -27px -13px;
}

.inmenue a.del {
  background-position: -41px 1px;
}

.inmenue a.del:hover {
  background-position: -41px -13px;
}

.moreinfo-wrapper {
  position: relative;
  clear: both;
}

.moreinfo {
  position: absolute;
  left: 0;
  bottom: 0px;
  padding: 5px 5px 0 5px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 82px;
  z-index: 11;
}

.moreinfo img {
  float: left;
}

.moreinfo img:hover {
  cursor: pointer;
}

.user .moreinfo a, .projects .moreinfo a, .tasks .morinfo a {
  color: $leftBlockBg;

}

/* ## CALENDAR ############## Sidebar / Datepicker ################# */

.cal {
  width: 184px;
}

.cal tr {
  height: 23px;
}

.cal td {
  padding: 0;
  background: url(../images/color-d.png) repeat 0 0;
  text-align: center;
  font-size: 11px;
}

.cal tr.head, .cal tr.weekday {
  font-weight: bold;
}

.cal tr.head td {
  background: url(../images/color-d.png) repeat 0 0;
}

.cal tr.weekday td {
  background: url(../images/color-c.png) repeat 0 0;
}

.cal td.back, .cal td.next {
  /*background: url(../images/autocomplete-bg-a.png) repeat-x 0 0;*/
}

.cal td.back a, .cal td.next a {
  display: block;
  width: 100%;
  height: 23px;
  background: url(../images/back-side.png) no-repeat center 7px;
}

.cal td.next a {
  background-image: url(../images/next-side.png);
}

.cal td.back a:hover, .cal td.next a:hover {
  background-position: center -16px;
}

.cal td.wrong {
  color: #3c556f;
  background: url(../images/color-c.png) repeat 0 0;
}

.cal td.today {
  color: #52a454;
  background: url(../images/color-c-green.png) repeat 0 0;
}

.cal td.red {
  color: #be4c43;
  background: url(../images/color-c-red.png) repeat 0 0;
}

.cal td.cyan {
  color: #529ba4;
  background: url(../images/color-c-cyan.png) repeat 0 0;
}

/* ## BIG CALENDAR ###################################### */

.block .bigcal table.thecal {
  border-collapse: separate;
  display: inline-table;
  table-layout: fixed;
}

.block .bigcal table.thecal thead {
  background: $leftBlockBg;
  font-size: 14px;
}

.block .bigcal table.thecal th {
  height: 37px;
  line-height: 37px;
  border: none;
  padding: 0;
}

.block .bigcal table.thecal .dayhead th {
  height: 27px;
  line-height: 27px;
  padding: 0 6px 0 6px;
}

.block .bigcal tbody.content td {
  border: none;
  width: 100px;
  background: $leftBlockBg;
  padding: 6px;
  line-height: normal;
}

.block .bigcal table.thecal td.today {
  background: $bigCalToday
}

.block .bigcal table.thecal td.second {}

.block .bigcal table.thecal td.othermonth {}

.block .bigcal .calcontent {}

.bigcal .scroll_left, .bigcal .scroll_right {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/scroll_left_miles.png) no-repeat center 15px;
}

.bigcal .scroll_right {
  background-image: url(../images/scroll_right_miles.png);
}

.bigcal .scroll_left:hover, .bigcal .scroll_right:hover {
  background-position: center -20px
}

.calinmenue {
  position: absolute;
  height: 0px;
  z-index: 1666;
}

.calinmenue ul {
  position: relative;
  left: 0;
  top: 0;
  padding: 6px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.calinmenue ul li a {
  display: block;
  height: 22px;
  line-height: 22px;
  margin: 0 0 1px 0;
  padding: 0 8px 0 8px;
  white-space: nowrap;
  color: $leftBlockBg;
  font-size: 11px;
  font-weight: bold;
}

.calinmenue ul li a:hover {
  text-decoration: none;
}

.closewin a {
  display: block;
  background: url(../images/closewin.png) no-repeat right 1px;
}

.closewin a:hover {
  background-position: right -19px;
}

.calinmenue ul li.closewin a {
  height: 14px;
  line-height: normal;
  padding: 0 0 0 4px;
  margin: 0 0 4px 0;
}

/* ## DATEPICKER ######################################## */

.datepick {
  clear:both;
  position: absolute;
  z-index: 1000000000;
}

.datepick .picker {
  position: relative;
  left: 152px;
  top: -210px;
  padding: 6px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.datepick .picker a {}

.datepick .cal {
  background: #fff;
}

.block .datepick table, .datepick table {
  border-collapse: separate;
  border: none;
}

.block .datepick table td, .datepick table td {
  padding: 0 6px 0 6px;
  min-width: 12px;
  border: none;
  height: 23px;
  line-height: 23px;
}

.projects .datepick td.today, .tasks .datepick td.today, .miles .datepick td.today, .timetrack .datepick td.today, .neutral .datepick td.today {
  color: $green;
  background: url(../images/color-c-green.png) repeat 0 0;
}

.projects .datepick td.red, .tasks .datepick td.red, .miles .datepick td.red, .timetrack .datepick td.red, .neutral .datepick td.red {
  color: $red;
  background: url(../images/color-c-red.png) repeat 0 0;
}

.datepick td.normalday:hover, .datepick td.today:hover, .datepick td.red:hover {
  cursor: pointer;
  background: #fff;
}

.projects .datepick td.next a {
  background-image: url(../images/next-side-projects.png);
}

.projects .datepick td.back a {
  background-image: url(../images/back-side-projects.png);
}

.tasks .datepick td.next a {
  background-image: url(../images/next-side-tasks.png);
}

.tasks .datepick td.back a {
  background-image: url(../images/back-side-tasks.png);
}

.timetrack .datepick td.next a {
  background-image: url(../images/next-side-timetrack.png);
}

.timetrack .datepick td.back a {
  background-image: url(../images/back-side-timetrack.png);
}

.user .datepick td.next a {
  background-image: url(../images/next-side-user.png);
}

.user .datepick td.back a {
  background-image: url(../images/back-side-user.png);
}

.miles .datepick td.next a {
  background-image: url(../images/next-side-miles.png);
}

.miles .datepick td.back a {
  background-image: url(../images/back-side-miles.png);
}

.files .datepick td.next a {
  background-image: url(../images/next-side-files.png);
}

.files .datepick td.back a {
  background-image: url(../images/back-side-files.png);
}

.neutral .datepick td.next a {
  background-image: url(../images/next-side-neutral.png);
}

.neutral .datepick td.back a {
  background-image: url(../images/back-side-neutral.png);
}

/* ## ONLINELISTE ######################################## */

#onlinelist ul {
  border-bottom: 1px solid #3c5570;
  float: left;
  position: relative;
}

#onlinelist li {
  width: 184px;
  clear: both;
  border-top: 1px solid #3c5570;
}

#onlinelist li a div {
  display: none;
}

#onlinelist li a div img {
  margin: 5px 5px 5px 5px;
  float: right;
}

#onlinelist a.user, #onlinelist a.chat, .chat-user {
  display: block;
  float: left;
  width: 167px;
  height: 23px;
  line-height: 23px;
  color: $baseTextColor;
  padding-left: 1px;
}

#onlinelist a.user:hover, .chat-user {
  color: #9daab7;
}

#onlinelist a.chat, .chat-user {
  width: 16px;
  padding: 0;
  background: url(../images/chat.png) no-repeat right -23px;
}

#onlinelist a.chat:hover {
  background-position: right -46px;
}

.chat-user {
  background-position: right 0;
}

#onlinelist li a:hover div {
  display:block;
  position: absolute;
  top: 0;
  left: -119px;
  width: 100px;
  z-index: 8;
  background: url(../images/color-b.png) repeat 0 0;
}

/* ## HEADLINES ##################################### */

.headline, .headline_lone {
  width: 100%;
  height: 35px;
  margin: 0 0 0 0;
  position: relative;

}

.headline h2 {
  position: absolute;
  height: 100%;
  line-height: 35px;
  top: 0;
  left: 0;
}

.headline_lone {
  height: 100%;
  line-height: 35px;
}

.headline_lone h2 {
  height: 32px;
  line-height: 33px;
  margin: -15px 0 10px 2px;
}

.headline h2, .headline h2 a {
  color: $leftBlockBg;
}

.headline img, .headline_lone img {
  float:left;
  margin: 0 7px 0 2px;
}

.headline_lone h2 img {
  margin: 0 0px 0 -4px;
}

h2 a:hover {
  text-decoration: none;
}

#content-left h2 a:hover {
  text-decoration: none;
  border-bottom: 1px dotted $leftBlockBg;
}

/* ## Block-headline - Toggle ## start ## */

a.win_block {
  display: block;
  width: 100%;
  height: 100%;
  background: $upIconBlock;
}

a.win_block:hover {
  background-position: 98.5% -23px;
}

a.win_none {
  display:block;
  width:100%;
  height: 100%;
  background: $upIconNone;
}

a.win_none:hover {
  background-position: 98.5% -85px;
}

/* ## BUTTON ####################################### */

a.butn_link, a.butn_link_active {
  display: block;
  float: left;
  height: 23px;
  line-height: 23px;
  padding: 0px 8px 0 8px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  margin: 0 1px 0 0;
}

.tablemenue a.butn_link, .tablemenue a.butn_link_active {
  -webkit-border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

body a.butn_link, body a.butn_link_active {
  color: $leftBlockBg;
}

/* ## AVATARE / MESSAGES ########################### */

.avatar, .avatar-profile {
  float: left;
  min-height: 1px;
}

.msgs .avatar {
  width: 92px;
}

.user .avatar-profile {
  width: 122px;
}

.user .avatar-profile img,.msgs .avatar img, .avatar img {
  float: left;
}

.message {
  float: left;
  overflow: hidden;
}

.message .block { /* block for user details in profile */
  margin: 0;
}

.msgs .message {
  width: 585px;
  margin: 0;
  padding: 0;
}

.msgs .message-fluid {
  margin: 0;
  padding: 0;
}

.message-in-fluid {
  width: 95%;
  overflow-x: auto;
}

.user .message {
  width: 567px;
}

.message-in {
  width: 585px;
  overflow-x: auto;
}

.message-in ul {
  padding-left: inherit;
}

.message-in li {
  list-style-type: disc;
  padding: 0;
}

.message-in ul, .descript ul {
  list-style-type: disc;
  padding-left: 40px;
}

.message-in img {
  height: auto;
}

.message img {
  float: left;
  margin: 0 6px 6px 0;
  max-width: 100%;
  height: auto;
}

.message p {
  margin: 0 0 12px 0;
}

p.tags-miles {
  clear: both;
  border-top: 1px dotted #000;
  margin: 12px 0 0 0;
  padding: 12px 0 0 0;
}

.message ul.files {
  margin: 12px 0 0 0;
}

.message ul.files table {
  margin: 0 0 1px 0;
}

.message ul.files table img {
  margin: 0;
}

.message ul.files table td {
  height: 30px;
  line-height: 30px;
  padding: 0;
}

.message ul.files table td.filepic {
  width: 35px;
}

.message ul.files table td.filelink {
  width: 502px;
}

.message ul.files table td.tools {
  width: 23px;
}

.message .toggle-content {
  border-right: none;
  border-top: 1px solid $leftBlockBg;
  border-bottom: 1px solid $leftBlockBg;
  padding: 12px 0 12px 6px;
}

/* ## Blind Toggles ################################### */

.blinded {
  overflow: hidden;
  clear: both;
}

/* ## Breadcrumbs #################################### */

.breadcrumb {
  width: 100%;
  height: 22px;
  line-height: 22px;
  margin: 0px 0 15px 0;
  position: relative;
  left: -3px;
  overflow: hidden;
}

.breadcrumb span {
  display: block;
  float: left;
  opacity: 0.4;
}

.breadcrumb a {
  float: left;
  opacity: 0.4;
}

.breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}

.breadcrumb img {
  float: left;
  height: 22px;
}

/* ## TAB-MENUES ################################### */

.tabswrapper {
  height: 45px;
  width: 100%;
  padding: 15px 0 0 0;
}

ul.tabs {
  position: relative;
  float: left;
}

ul.tabs li {
  float: left;
  width: 57px;
  height: 45px;
  margin: 0 1px 0 0;
}

ul.tabs li a {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

ul.tabs li a:hover, ul.tabs li a.active {
  background-position: 0 -45px;
}

ul.tabs li a:hover span {
  position: absolute;
  right: -258px;
  top: 25px;
  display: block;
  width: 250px;
  color: $tabsInfo;
  font-size: 12px;
  font-weight: bold;
}

// Tabs menue
ul.tabs li span {
  display: none;
}

ul.tabs li.desk a {
  background-image: $blockTabDesktop;
}

ul.tabs li.projects a {
  background-image: $blockTabProject;
}

ul.tabs li.customers a {
  background-image: $blockTabCustomers;
}

ul.tabs li.tasks a {
  background-image: $blockTabTasklist;
}

ul.tabs li.msgs a {
  background-image: $blockTabMessages;
}

ul.tabs li.user-male a {
  background-image: $blockTabUserMale;
}

ul.tabs li.edit-male a {
  background-image: $blockTabEditMale;
}

ul.tabs li.user-female a {
  background-image: $blockTabEditFemale;
}

ul.tabs li.edit-female a {
  background-image: $blockTabSettings;
}

ul.tabs li.edit a {
  background-image: $blockTabEditMale;
}

ul.tabs li.miles a {
  background-image: $blockTabMilestones;
}

ul.tabs li.files a {
  background-image: $blockTabFiles;
}

ul.tabs li.user a {
  background-image: $blockTabUserList;
}

ul.tabs li.timetrack a {
  background-image: $blockTabTimetracker;
}

ul.tabs li.system-settings a {
  background-image: $blockTabSystemSettings;
}

/* ## MODALs ######################################## */

#modal_container {
  overflow: auto;
  color:  $colorMain;
  background: none;
  text-align: left;
}

#modal_container.tasksmodal, #modal_container.milesmodal {
  background: $tasksC;
  color: $tasksMain;
  min-height: 150px;
  width: 500px;
  padding: 6px 12px 12px 12px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin: -50px 0 0 -126px;
}

#modal_container.milesmodal {
  background: $milesC;
  color: $milesMain;
}

#modal_container.pics {
  background: none;
  margin: -50px 0 0 -126px;
}

#modal_container.pics img {
  margin: 0 0 -3px 0;
  border: none;
  padding: 0;
}

#modal_overlay {
  background-color: $colorMain;
}

#modal_overlay.useroverlay {
  background: $userB;
}

#modal_overlay.tasksoverlay {
  background: $tasksB;
}

#modal_overlay.milesoverlay {
  background: $milesB;
}

#modal_container .inmodal {
  background: $leftBlockBg;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  padding: 8px;
  min-height: 100px;
  max-height: 450px;
  overflow: auto;
}

#modal_container .inmodal h2 span {
  font-size: 12px;
}

.acc_modal {
  width: 100%;
}

.acc_modal .m_a {
  width: 24px;
}

.acc_modal .m_b {}

.acc_modal .m_c {
  width: 150px;
}

.acc_modal .icon {
  padding: 0;
}

.acc_modal .icon img {
  width: 24px;
  height: auto;
  float: left;
}

.acc_modal .content_in {
  padding: 6px 6px 6px 31px;
  border-top: 1px solid $leftBlockBg;
}

#modal_container .inmodal img {
  max-width: 430px;
  height: auto;
}

.modaltitle {
  display: block;
  height: 38px;
  line-height: 38px;
  color: $leftBlockBg;
  font-size: 14px;
  font-weight: bold;
  position: relative;
}

.modaltitle img {
  float: left;
}

.modaltitle a.winclose {
  display: block;
  width: 19px;
  height: 19px;
  background: $modalCloseIcon;
  float: right;
  position: absolute;
  right: 0;
  top: 8px;
}

.modaltitle a.winclose:hover {
  background-position: 0 -37px;
}

/* ## STATUS ############ Statusbar Project ############# */

.statuswrapper {
  width: 100%;
}

.statuswrapper ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.statuswrapper li {
  margin: 0 2px 0 0;
  border: 1px solid #000;
  height: 23px;
  line-height: 23px;
  float: left;
}

.statuswrapper li.link:hover {
  cursor: pointer;
}

.statuswrapper a {
  display: block;
  height: 100%;
  padding: 0 6px 0 6px;
  float: left;
}

.statuswrapper a.close, .statuswrapper a.closed {
  width: 19px;
  background: $projectCloseIcon;
}

.statuswrapper a.reply, .statuswrapper a.reply-active {
  width: 19px;
  background: $projectReplyIconActive;
}

.statuswrapper a.edit, .statuswrapper a.edit-active  {
  width: 19px;
  background: $projectEditIconActive;
}

.statuswrapper a.del {
  width: 19px;
  background: $projectDeleteIcon;
}

.statuswrapper a:hover, .statuswrapper a.closed, .statuswrapper a.edit-active, .statuswrapper a.reply-active {
  background-position: center -22px;
}

.statuswrapper a.closed:hover {
  background-position: center 4px;
}

.statuswrapper a.desc, .statuswrapper a.desc_active {
  padding: 0 12px 0 6px;
  margin: 0 6px 0 0;
  background: $projectDescriptionToggleIconActive;
}

.statuswrapper a.desc:hover {
  background-position: right -16px;
}

.statuswrapper a.desc_active {
  background-position: right -41px;
}

.statuswrapper a.desc_active:hover {
  background-position: right -66px;
}

.status {
  width: 130px;
  height: 56px;
  position: relative;
  right: 0;
  top: -47px;
  margin: 0 0 -56px 0;
  float: right;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}

.statusbar, .statusbar_b {
  width: 128px;
  height: 12px;
  background: $statusBarGradientIncomplete;
  border: 1px solid #000;
  margin: 6px 0 0 0;
}

.statusbar_b {
  float: left;
  height: 8px;
  background: $statusBarBGradientIncomplete;
  margin: 9px 12px 0 0;
}

.statusbar .complete, .statusbar_b .complete {
  height: 12px;
  background: $statusBarGradientComplete;
}

.statusbar_b .complete {
  height: 8px;
  background: $statusBarBGradientComplete;
}

/* ## CONTENT ########### without table ################ */

.contenttitle {
  width: 100%;
  height: 37px;
  line-height: 37px;
  font-size: 12px;
}

.contenttitle_menue {
  float: left;
  width: 33px;
  height: 25px;
  padding: 12px 7px 0 6px;
}

.contenttitle_in {
  float: left;
  width: 652px;
  height: 37px;
  font-weight: bold;
  overflow: hidden;
}

.contenttitle_in a:hover {
  text-decoration: underline;
}

.content_in_wrapper {
  float: left;
  width: 100%;
  padding: 0 0 6px 0;
  margin: 1px 0 1px 0;
}

.content_in_wrapper_in {
  padding: 0 14px 0 14px;
}

.staterow {
  width: 100%;
  height: 23px;
  line-height: 23px;
  clear: both;
  font-size: 12px;
}

.staterowin {
  width: 352px;
  height: 23px;
  overflow: hidden;
  margin: 0 0 0 48px;
}

.staterowin_right {
  width: 50px;
  height: 23px;
  overflow: hidden;
  margin: -22px 0 0 650px;
  float: left;
}

/* ## FILES ################ Specials ################## */

a.dir_up_butn {
  display: block;
  width: 28px;
  height: 12px;
  background: $parentFolderIcon;
}

a.dir_up_butn:hover {
  background-position: 2px -31px;
}

/* ## HEADLINES ############# Specials ############### */

#content-left-in h1 a:hover {
  border-bottom: 1px dotted #000;
}

/* ## DESCRIPTION ############# Specials ############### */

.descript {
  clear: both;
  width: 100%;
  overflow: hidden;
}

.msgs .descript .avatar {
  width: 98px;
}

.msgs .descript .message {
  width: 608px;
  overflow: hidden;
}

.msgs .descript .message img {
  max-width: 608px;
  height: auto;
}

.descript a:hover {
  text-decoration: underline;
}

/* ## TABLES ######################################## */

.blockwrapper { /* in projectfiles */
  margin: 1px 0 0 0;
}

.block {
  margin: 1px 0 0 0;
}

.block a:hover {
  text-decoration: underline;
}

.block a.butn_link:hover, .block a.butn_link_active:hover, .block .inwrapper a:hover {
  text-decoration: none;
}

.block table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.block table tfoot td {
  display: none;
}

.block table td {
  height: 27px;
  line-height: 27px;
  border-right: 1px solid $leftBlockBg;
  padding: 0 0 0 6px;
}

.block table.log td {
  height: auto;
  line-height: normal;
  padding: 6px 0 6px 6px;
}

.block table tbody.paging td {
  height: 27px;
  line-height: 27px;
  padding: 0 0 0 6px;
}

.block table td.finished, .block table td.finished a {}

.block table td.symbols img {
  float: left;
}

.block table thead {
  background-repeat: repeat-x;
}

.message .block table thead {
  display: none;
}

.block table thead th {
  height: 37px;
  line-height: 37px;
  padding: 0 0 0 6px;
  border-right: 1px solid $leftBlockBg;
}

.block table.second-thead td {
  height: 27px;
  line-height: 27px;
  font-weight: bold;
  border-color: transparent;
  border-top: 1px solid $leftBlockBg;
}

.block table.second-thead:hover {
  cursor: pointer;
}

.toggleblock {
  border-top: 1px solid $leftBlockBg;
}

.doneblock .toggleblock td, .block .dones td {
  text-decoration: line-through;
  opacity: 0.6;
}

.doneblock .toggleblocks td a, .block .dones td a {
  text-decoration: line-through;
}

.doneblock table tr.acc td, .block .dones td.info, .block .dones td.info a {
  text-decoration: none;
}

.block table td.tools, .block table th.tools, .message .block table td.right {
  border-right: none;
  padding: 0 0 0 9px;
}

.message .block table td.right {
  padding: 0 0 0 6px;
}

.block table tr.acc td {
  height: 0px;
}

.block table tr.acc td .accordion_toggle {
  display: none;
}

.block table tr.acc td {
  padding: 0;
  border: none;
  overflow: hidden;
}

.block table tr.acc td .accordion_content {
  overflow: hidden;
  display: none;
}

.block table tr.acc td .accordion_content,.accordion_content_active .acc-in {
  border-top: 1px solid $leftBlockBg;
  padding: 12px 9px 18px 9px;
  line-height: normal;
  overflow: hidden;
}

.smooth {
  opacity:.6;
}

.tablemenue {
  clear: both;
  height: auto;
  border-top: 1px solid #000;
  margin: 1px 0 0 0;
}

.tablemenue-in {
  height: 21px;
  padding: 0 0 0 38px;
}

.block .addmenue, .blockwrapper .addmenue, .addmenue {
  margin: 0 0 1px 0;
  overflow: hidden;
  clear: both;
  width: 100%;
}

.block_in_wrapper {
  padding: 10px 0 10px 44px;
}

/* ## TABLES - COLS ########### ges. 706px ############# */

th.a, td.a {
  width: 31px;
}

th.a img, td.a img {
  float: left;
}

th.b, td.b {
  width: 230px;
}

th.ba, td.ba {
  width: 216px;
}

th.bb, td.bb {
  width: 92px;
}

th.c, td.c {
  width: 190px;
}

th.d, td.d {
  width: 176px;
}

th.cd, td.cd {}

th.ce, td.ce {
  width: 121px;
}

th.de, td.de {
  width: 121px;
}

th.cf, td.cf {
  width: 91px;
}

th.e, td.e {}

th.tools, td.tools {
  width: 42px;
}

.user .message col.a {
  width: 180px;
}

.user .message col.b {
  width: 372px;
}

/* ## TABLES ################ Block - Colors ############# */

.projects .headline, .projects a.butn_link, .projects button, .projects a.butn_link_active:hover, .projects .inmenue a span, .projects .moreinfo {
  background: $projectsBlockhead;
}

.projects thead {
  background: $projectsTablehead;
}

.projects .second-thead, .projects .second-thead:hover td, .projects .block_in_wrapper, .projects .inwrapper li:hover, .projects .tableend, .projects .statuswrapper li.link:hover {
  background: $projectsTableSecondhead;
}

.projects .color-a, .projects .statuswrapper li, .projects .datepick table td, .projects .datepick tr.head td {
  background: $projectsColorA;
}

.projects tbody.alternateColors:nth-child(even) {
  background: $projectsColorA;
}

.projects tbody.alternateColors:nth-child(odd) {
  background: $projectsColorB;
}

.projects .color-b, .projects .datepick td.wrong, .projects .datepick tr.weekday td {
  background: $projectsColorB;
}

.projects .block, .projects a, .projects h1, .projects .block .tablemenue, .projects .block .addmenue, .projects p.tags-miles {
  border-color: $projectsMain;
  color: $projectsMain;
}

.projects, .projects .block td.finished, .projects .block td.finished a, .projects .datepick .cal, .projects .block_in_wrapper h2 {
  color: $projectsMain;
}

.projects h1 span, .projects h1 span a, .projects .status, .projects .statusbar, .projects .statusbar_b {
  color: $projectsB;
  border-color: $projectsB;
}

.projects .datepick td.wrong {
  color: $projectsB;
}

.projects h1 span a {
  border-color: $projectsMain;
}

.projects form, .projects form input, .projects form select, .projects form textarea, .projects form .row .editor, .projects .statuswrapper li {
  border-color: $projectsB;
  color: $projectsMain;
}

.projects a.butn_link:hover, .projects button:hover, .projects form .fileinput:hover button, .projects a.butn_link_active, .projects .datepick .picker {
  background: $projectsC;
}

.projects button.paginationActive{
  background: $projectsC;
  font-size: 16px;
  color: $projectsMain;
  float: none;
  margin: 0 0 0 0;
}

.projects button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* TASKS COLORS #####################################*/

.tasks .headline, .tasks a.butn_link, .tasks button, .tasks a.butn_link_active:hover, .tasks .inmenue a span, .tasks .moreinfo {
  background: $tasksBlockhead;
}

.tasks thead {
  background: $tasksTablehead;
}

.tasks .second-thead, .tasks .second-thead:hover td, .tasks .block_in_wrapper, .tasks .statuswrapper li.link:hover {
  background: $tasksTableSecondhead;
}

.tasks .color-a, .tasks .datepick table td, .tasks .datepick tr.head td, .tasks .statuswrapper li {
  background: $tasksColorA;
}

.tasks tbody.alternateColors:nth-child(even) {
  background: $tasksColorA;
}

.tasks tbody.alternateColors:nth-child(odd) {
  background: $tasksColorB;
}

.tasks .color-b, .tasks .datepick td.wrong, .tasks .datepick tr.weekday td {
  background: $tasksColorB;
}

.tasks, .tasks a, .tasks h1, .tasks .headline_lone h2 , .tasks .block .tablemenue, .tasks .block .addmenue, .tasks p.tags-miles {
  border-color: $tasksMain;
  color: $tasksMain;
}

.tasks .block td.finished, .tasks .block td.finished a, .tasks .datepick .cal, .tasks .block_in_wrapper h2 {
  color: $tasksMain;
}

.tasks h1 span, .tasks h1 span a, .tasks .datepick td.wrong {
  color: $tasksB;
}

.task h1 span a {
  border-color: $tasksMain;
}

.tasks form, .tasks form input, .tasks form select, .tasks form textarea, .tasks form .row .editor, .tasks .statuswrapper li {
  border-color: $tasksB;
  color: $tasksMain;
}

.tasks a.butn_link:hover, .tasks button:hover, .tasks form .fileinput:hover button, .tasks a.butn_link_active, .tasks .datepick .picker {
  background: $tasksC;
}

.tasks button.paginationActive{
  background: $tasksC;
  font-size: 16px;
  color: $tasksB;
  float: none;
  margin: 0 0 0 0;
}

.tasks button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* MESSAGES COLORS #################################*/

.msgs .headline, .msgs a.butn_link, .msgs button, .msgs a.butn_link_active:hover, .msgs .inmenue a span, .msgs .moreinfo, .msgs .inmenue a span, .msgs .moreinfo {
  background: $msgsBlockhead;
}

.msgs thead {
  background: $msgsTablehead;
}

.msgs .second-thead, .msgs .second-thead:hover td, .msgs .block_in_wrapper, .msgs .inwrapper li:hover, .msgs .statuswrapper li.link:hover {
  background: $msgsTableSecondhead;
}

.msgs .color-a, .msgs .statuswrapper li {
  background: $msgsColorA;
}

.msgs tbody.alternateColors:nth-child(even) {
  background: $msgsColorA;
}

.msgs .color-b {
  background: $msgsColorB;
}

.msgs tbody.alternateColors:nth-child(odd) {
  background: $msgsColorB;
}

.msgs .color-a ul.files table, .msgs .color-b ul.files table {
  background: $msgsColorC;
}

.msgs, .msgs .block, .msgs a, .msgs h1, .msgs .block .tablemenue, .msgs .block .addmenue, .msgs p.tags-miles {
  border-color: $msgsMain;
  color: $msgsMain;
}

.msgs h1 span, .msgs h1 span a, .msgs .block_in_wrapper h2 {
  color: $msgsB;
}

.msgs h1 span a {
  border-color: $msgsMain;
}

.msgs form, .msgs form input, .msgs form select, .msgs form textarea, .msgs form .row .editor, .msgs .statuswrapper li {
  border-color: $msgsB;
  color: $msgsMain;
}

.msgs a.butn_link:hover, .msgs button:hover, .msgs button.inner-active, .msgs form .fileinput:hover button, .msgs a.butn_link_active {
  background: $msgsC;
}

.msgs button.paginationActive{
  background: $msgsC;
  font-size: 16px;
  color: $msgsB;
  float: none;
  margin: 0 0 0 0;
}

.msgs button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* USER COLORS #################################*/

.user .headline, .user a.butn_link, .user button, .user a.butn_link_active:hover, .user .inmenue a span, .user .moreinfo {
  background: $userBlockhead;
}

.user thead, .user .contenttitle {
  background: $userTablehead;
}

.user .second-thead, .user .second-thead:hover td, .user .block_in_wrapper, .user .inwrapper li:hover, .user .tableend {
  background: $userTableSecondhead;
}

.user .color-a, .user .staterow {
  background: $userColorA;
}

.user tbody.alternateColors:nth-child(even) {
  background: $userColorA;
}

.user tbody.alternateColors:nth-child(odd) {
  background: $userColorB;
}

.user .color-b, .user .content_in_wrapper {
  background: $userColorB;
}

.user .color-a ul.files table, .user .color-b ul.files table {
  background: $userColorC;
}

.user .block, .user .blockwrapper, .user a, .user h1, .user .tablemenue, .user .addmenue, .user p.tags-miles, .user .userwrapper, .user .block_in_wrapper h2 {
  border-color: $userMain;
  color: $userMain;
}

.user h1 span, .user h1 span a, .user .inmenue a span {
  color: $userB;
}

.user h1 span a {
  border-color: $userMain;
}

.user form, .user form input, .user form select, .user form textarea, .user form .row .editor {
  border-color: $userB;
  color: $userMain;
}

.user a.butn_link:hover, .user button:hover, .user form .fileinput:hover button, .user a.butn_link_active {
  background: $userC;
}

.user button.paginationActive{
  background: $userC;
  font-size: 16px;
  color: $userB;
  float: none;
  margin: 0 0 0 0;
}

.user button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* USER PROFILE */

.user .export-main {
  background-image: $vcardIcon;
}

.userwrapper {
  float: left;
  border-top: 1px solid;
  border-bottom: 1px solid;
  padding: 1px 0;
}

.userwrapper td.avatarcell {
  background: $userColorA;
  border-right: 1px solid $leftBlockBg;
  padding: 8px 8px 0;
}

/* NEUTRAL COLORS #################################*/

.neutral .headline, .neutral a.butn_link, .neutral button, .neutral a.butn_link_active:hover {
  background: $neutralBlockhead;
}

.neutral thead, .neutral .contenttitle {
  background: $neutralTablehead;
}

.neutral .second-thead, .neutral .second-thead:hover td, .neutral .block_in_wrapper, .neutral .inwrapper li:hover, .neutral .tableend, .neutral .paging {
  background: $neutralTableSecondhead;
}

.neutral .color-a, .neutral .staterow {
  background: $neutralColorA;
}

.neutral .color-b, .neutral .content_in_wrapper {
  background: $neutralColorB;
}

.neutral tbody.alternateColors:nth-child(even) {
  background: $neutralColorA;
}

.neutral tbody.alternateColors:nth-child(odd) {
  background: $neutralColorB;
}

.neutral .color-a ul.files table, .neutral .color-b ul.files table {
  background: $neutralColorC;

}

.neutral .block, .neutral a, .neutral h1, .neutral .block .tablemenue, .neutral .block .addmenue, .neutral p.tags-miles, .neutral .block_in_wrapper h2 {
  border-color: $neutralMain;
  color: $neutralMain;
}

.neutral h1 span, .neutral h1 span a {
  color: $neutralB;
}

.neutral h1 span a {
  border-color: $neutralMain;
}

.neutral form, .neutral form input, .neutral form select, .neutral form textarea, .neutral form .row .editor {
  border-color: $neutralB;
  color: $neutralMain;
}

.neutral a.butn_link:hover, .neutral button:hover, .neutral form .fileinput:hover button, .neutral a.butn_link_active, .neutral .datepick .picker {
  background: $neutralC;
}

.neutral button.paginationActive{
  background: $neutralC;
  font-size: 16px;
  color: $neutralB;
  float: none;
  margin: 0 0 0 0;
}

.neutral button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* TIMETRACKING COLORS #################################*/

.timetrack .headline, .timetrack a.butn_link, .timetrack button, .timetrack a.butn_link_active:hover {
  background: $timetrackBlockhead;
}

.timetrack thead {
  background: $timetrackTablehead;
}

.timetrack .second-thead, .timetrack .second-thead:hover td, .timetrack .block_in_wrapper, .timetrack .inwrapper li:hover, .timetrack .tableend {
  background: $timetrackTableSecondhead;
}

.timetrack .color-a, .timetrack .datepick table td, .timetrack .datepick tr.head td {
  background: $timetrackColorA;
}

.timetrack .color-b, .timetrack .datepick td.wrong, .timetrack .datepick tr.weekday td {
  background: $timetrackColorB;
}

.timetrack tbody.alternateColors:nth-child(even) {
  background: $timetrackColorA;
}

.timetrack tbody.alternateColors:nth-child(odd) {
  background: $timetrackColorB;
}

.timetrack .color-a ul.files table, .timetrack .color-b ul.files table {
  background: $timetrackColorC;
}

.timetrack .block, .timetrack a, .timetrack h1, .timetrack .block .tablemenue, .timetrack .block .addmenue, .timetrack p.tags-miles {
  border-color: $timetrackMain;
  color: $timetrackMain;
}

.timetrack .datepick .cal, .timetrack .block_in_wrapper h2 {
  color: $timetrackMain;
}

.timetrack h1 span, .timerack h1 span a, .timetrack .datepick td.wrong {
  color: $timetrackB;
}

.timetrack h1 span a {
  border-color: $timetrackMain;
}

.timetrack form, .timetrack form input, .timetrack form select, .timetrack form textarea, .timetrack form .row .editor {
  border-color: $timetrackB;
  color: $timetrackMain;
}

.timetrack a.butn_link:hover, .timetrack button:hover, .timetrack form .fileinput:hover button, .timetrack a.butn_link_active, .timetrack .datepick .picker {
  background: $timetrackC;
}

.timetrack button.paginationActive{
  background: $timetrackC;
  font-size: 16px;
  color: $timetrackB;
  float: none;
  margin: 0 0 0 0;
}

.timetrack button.paginationInactive{
  float: none;
  margin: 0 0 0 0;
}

/* MILESTONES COLORS #################################*/

.miles .headline, .miles a.butn_link, .miles button, .miles a.butn_link_active:hover, .miles .calinmenue ul {
  background: $milesBlockhead;
}

.miles thead, .miles .calhead th {
  background: $milesTablehead;
}

.miles .second-thead, .miles .block_in_wrapper, .miles .inwrapper li:hover, .miles .tableend, .miles .thecal, .miles .second-thead:hover td, .miles .statuswrapper li.link:hover {
  background: $milesTableSecondhead;
}

.miles .color-a, .miles table.thecal .dayhead th, .miles .calinmenue ul li.link a, .miles .datepick table td, .miles .datepick tr.head td, .miles .statuswrapper li {
  background: $milesColorA;
}

.miles .color-b, .miles .calinmenue ul li.link a:hover, .miles .datepick td.wrong, .miles .datepick tr.weekday td, .miles .content_in_wrapper {
  background: $milesColorB;
}

.miles .color-a ul.files table, .miles .color-b ul.files table {
  background: $milesColorC;
}

.miles tbody.alternateColors:nth-child(even) {
  background: $milesColorA;
}

.miles tbody.alternateColors:nth-child(odd) {
  background: $milesColorB;
}

.miles, .miles a, .miles h1, .miles .block .tablemenue, .miles .block .addmenue, .miles p.tags-miles, .bigcal tbody.content td {
  border-color: $milesMain;
  color: $milesMain;
}

.miles .block td.finished, .miles .block td.finished a, .miles .datepick .cal, .miles .block_in_wrapper h2 {
  color: $milesMain;
}

.miles h1 span, .miles h1 span a, .miles .block td.othermonth a, .miles .block td.othermonth, .miles .datepick td.wrong {
  color: $milesB;
}

.miles h1 span a, .miles .content-spacer-b {
  border-color: $milesMain;
}

.miles form, .miles form input, .miles form select, .miles form textarea, .miles form .row .editor, .miles .statuswrapper li {
  border-color: $milesB;
  color: $milesMain;
}

.miles a.butn_link:hover, .miles button:hover, .miles form .fileinput:hover button, .miles a.butn_link_active, .miles .datepick .picker {
  background: $milesC;
}

.miles button.paginationActive{
  background: $milesC;
  font-size:16px;
  color:$milesB;
  float:none;
  margin:0 0 0 0;
}

.miles button.paginationInactive{
  float:none;
  margin:0 0 0 0;
}

/* FILES COLORS #####################################*/

.files .headline, .files a.butn_link, .files button, .files a.butn_link_active:hover, .files .inmenue a span, .files .moreinfo {
  background: $filesBlockhead;
}

.files thead, .files .contenttitle {
  background: $filesTablehead;
}

.files .second-thead, .files .second-thead:hover td, .files .block_in_wrapper, .files .inwrapper li:hover {
  background: $filesTableSecondhead;
  cursor:move;
}

.files .color-a, .files .datepick table td, .files .datepick tr.head td, .files .staterow {
  background: $filesColorA;
}

.files .color-b, .files .datepick td.wrong, .files .datepick tr.weekday td, .files .content_in_wrapper {
  background: $filesColorB;
}

.files .block, .files .blockwrapper, .files a, .files h1, .files .tablemenue, .files .addmenue, .files p.tags-miles {
  border-color: $filesMain;
  color: $filesMain;
}

.files .block td.finished, .files .block td.finished a, .files .datepick .cal, .files .block_in_wrapper h2 {
  color: $filesMain;
}

.files h1 span, .files h1 span a, .files .datepick td.wrong {
  color: $filesB;
}

.files h1 span a {
  border-color: $filesMain;
}

.files form, .files form input, .files form select, .files form textarea, .files form .row .editor {
  border-color: $filesB;
  color: $filesMain;
}

.files a.butn_link:hover, .files button:hover, .files form .fileinput:hover button, .files a.butn_link_active, .files .datepick .picker {
  background: $filesC;
}

.files button.paginationActive{
  background: $filesC;
  font-size:16px;
  color:$filesB;
  float:none;
  margin:0 0 0 0;
}

.files button.paginationInactive{
  float:none;
  margin:0 0 0 0;
}

/* ## ACCORDION ################ Toggle ############### */

span.acc-toggle, span.acc-toggle-active, .second-thead span.acc-toggle, .second-thead span.acc-toggle-active {
  display: block;
  width: 97%;
  height: 100%;
  background: $toggleIcon;
  cursor: pointer;
}

.second-thead span.acc-toggle, .second-thead span.acc-toggle-active { /* for darker backgrounds */
  background-image: $toggleIconLight;
}

span.acc-toggle:hover, .second-thead:hover span.acc-toggle {
  background-position: right -15px;
}

span.acc-toggle-active, .second-thead span.acc-toggle-active {
  background-position: right -40px;
}

span.acc-toggle-active:hover, .second-thead:hover span.acc-toggle-active  {
  background-position: right -65px;
}

.toggle-in {
  position: relative;
  width: 100%;
  height: 27px;
}

.toggle-in a, .toggle-in.acc-toggle-active a {
  display: block;
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ## ACCORDION ################ Tools ############### */

a.butn_check, a.butn_checked, a.butn_reply {
  display: block;
  width: 100%;
  height: 27px;
  background: $toolIconClose;
}

a.butn_check:hover, a.butn_checked, a.butn_reply:hover {
  background-position: 4px -20px;
}

a.butn_checked:hover {
  background-position: 4px 6px;
}

a.butn_reply {
  background-image: $toolIconReply;
}

a.butn_reply_active {
  display: block;
  width: 100%;
  height: 27px;
  background: $toolIconReplyActive;
}

a.tool_edit, a.tool_del {
  display: block;
  width: 14px;
  height: 23px;
  float: left;
  margin-right: 4px;
  background: $toolIconEdit;
}

a.tool_edit_active
{
  display: block;
  width: 14px;
  height: 23px;
  float: left;
  margin-right: 4px;
  background: $toolIconEditActive;
}

a.tool_del {
  background-image: $toolIconDelete;
  margin: 0;
}

a.tool_edit:hover, a.tool_del:hover {
  background-position: 0 -22px;
}

/* ## ACCORDION ############### Marker ############## */

.marker-late, .marker-late a {
  color: $red;
}

.marker-today, .marker-today a {
  color: $green;
}

.green, .green a {
  color: $green;
  border-color: $green;
  background-color:$greenbg;
}

.red, .red a {
  color: $red;
  border-color: $red;
  background-color:$redbg;
}

/* ## Headlines ## start ## */

h1 {
  font-size: 21px;
  margin:0 0 0px 0px;
  height: 25px;
  line-height: 21px;
}

#content-left h1 {
  width: 669px;
  overflow: hidden;
}

h1.head {
  font-size: 24pt;
  margin: 0 0 0px 0;
  color: white;
  height: 35px;
}

h1 span {
  font-size:11pt;
  margin-left:6px;
}

h2 {
  font-size:11pt;
  margin:0 0 10px 0;
}

h2.head {
  font-size:11pt;
  margin:0 0 10px 0;
  color:white;
  font-weight:normal;
}

/* ## Infos ## start ## */

span.info {
  font-size: 12px;
}

.infowin_left {
  position: relative;
  top: -72px;
  right: 0;
  height: 40px;
  margin: 0 0 -40px 0;
  font-size: 12px;
  font-weight: bold;
  float: right;
}

.infowin_left img {
  float:left;
  position: relative;
  top: -8px;
  margin: 0 0 -12px 0;
}

.info_in_red, .info_in_green, .info_in_yellow {
  padding: 10px 10px 8px 4px;
  border: 1px solid #fff;
  float: right;
  color: #fff;
  background: $infoError;
  line-height: 22px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

.info_in_green {
  background: $infoSuccess;
}

.info_in_yellow {
  background: $infoWarning;
}

/* ## Footer ## start ## */

#footer-wrapper {
  clear: both;
  width: 100%;
  min-width: 980px;
  height: 26px;
  font-size: 9pt;
  margin-top: -26px;
}

.footer {
  width: 980px;
  margin: 0 auto 0 auto;
}

.footer-in {
  padding: 7px 0 0 2px;
  color: $footer;
}

.footer a {
  color: $footer;
}

/* ## Footer ## end ## */
